<!-- src/views/LoginView.vue -->
<template>
<div class="content">
<Particles
        id="tsparticles" 
        class="login__particles" 
        :options="options"
        />
   <!-- 包裹器：负责滑入动画 -->
    <div class="form-wrapper" :class="{ mounted: isMounted }">
      <form class="login-form" @submit.prevent="handleLogin">
        <h2>用户登录</h2>

        <!-- 输入框包裹：给下面 ::before 动画用 -->
        <div class="input-box">
          <input v-model="form.username" type="text" required />
          <label>用户名</label>
        </div>

        <div class="input-box">
          <input v-model="form.password" type="password" required />
          <label>密码</label>
        </div>

        <!-- 霓虹按钮 -->
        <button type="submit" :disabled="loading" class="glow-btn">
          <span>{{ loading ? '登录中...' : '登录' }}</span>
        </button>

        <p v-if="error" class="error">{{ error }}</p>
      </form>
    </div>
</div>

</template>

<script setup>
/* 原逻辑完全保留，只加一行挂载标记 */
import { reactive, ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import request from '@/utils/request' // axios 实例

const router = useRouter()
const form = reactive({
  username: '',
  password: ''
})
const loading = ref(false)
const error = ref('')


const handleLogin = async () => {
  loading.value = true
  error.value = ''

  try {
    // 假设后端登录接口为 POST /auth/login，返回 { token: 'xxx' }
    const res = await request.post('/login', {
      username: form.username,
      password: form.password
    })
    

    // 保存 token（实际项目建议用 Pinia + 持久化）
    localStorage.setItem('token', res.token)

    // 跳转首页
    router.push({ name: 'Home' })
  } catch (err) {
    error.value = err.response?.data?.message || '登录失败，请重试'
  } finally {
    loading.value = false
  }
}

const isMounted = ref(false)
onMounted(() => (isMounted.value = true)) // 触发滑入
// ------------------------------------------------
const options = {
  fpsLimit: 60,
  interactivity: {
    detectsOn: 'canvas',
    events: {
      onClick: { // 开启鼠标点击的效果
        enable: true,
        mode: 'push'
      },
      onHover: { // 开启鼠标悬浮的效果(线条跟着鼠标移动)
        enable: true,
        mode: 'grab'
      },
      resize: true
    },
    modes: { // 配置动画效果
      bubble: {
        distance: 400,
        duration: 2,
        opacity: 0.8,
        size: 40
      },
      push: {
        quantity: 4
      },
      grab: {
        distance: 200,
        duration: 0.4
      },
      attract: { // 鼠标悬浮时，集中于一点，鼠标移开时释放产生涟漪效果
        distance: 200,
        duration: 0.4,
        factor: 5
      }
    }
  },
  particles: {
    color: {
      value: '#BA55D3' // 粒子点的颜色
    },
    links: {
      color: '#FFBBFF', // 线条颜色
      distance: 150,//线条距离
      enable: true,
      opacity: 0.4, // 不透明度
      width: 1.2 // 线条宽度
    },
    collisions: {
      enable: true
    },
    move: {
      attract: { enable: false, rotateX: 600, rotateY: 1200 },
      bounce: false,
      direction: 'none',
      enable: true,
      out_mode: 'out',
      random: false,
      speed: 0.5, // 移动速度
      straight: false
    },
    number: {
      density: {
        enable: true,
        value_area: 800
      },
      value: 80//粒子数
    },
    opacity: {//粒子透明度
      value: 0.7
    },
    shape: {//粒子样式
      type: 'star'
    },
    size: {//粒子大小
      random: true,
      value: 3
    }
  },
  detectRetina: true
}

</script>

<style scoped>
/* ========= 整体布局 ========= */
html,body {
  margin: 0;        /* 去掉浏览器默认 8px */
  padding: 0;
  height: 100%; 
  overflow: hidden; /* 可选：强制永不出现滚动条 */
}
.content {
  width: 100vw;
  height: 100vh;
  inset: 0; 
  position: absolute;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-end; /* 表单放右边 */
  padding-right: 8vw;
  box-sizing: border-box;
}

.login__particles {
  position: absolute;
  inset: 0;
  background: url('@/asset/010.jpg') center/cover no-repeat;
  opacity: 0.9;
  pointer-events: none;
}

/* ========= 滑入包裹器 ========= */
.form-wrapper {
  width: 380px;
  max-width: 90%;
  transform: translateX(120%);
  opacity: 0;
  transition: transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.6s;
}

.form-wrapper.mounted {
  transform: translateX(0);
  opacity: 1;
}

/* ========= 毛玻璃表单 ========= */
.login-form {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 20px;
  padding: 40px 30px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.login-form h2 {
  text-align: center;
  color: #fff;
  margin-bottom: 30px;
  font-weight: 600;
  letter-spacing: 2px;
}

/* ========= 输入框 ========= */
.input-box {
  position: relative;
  margin-bottom: 28px;
}

.input-box input {
  width: 100%;
  padding: 12px 0;
  background: transparent;
  border: none;
  border-bottom: 2px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 16px;
  outline: none;
  transition: border-color 0.3s;
}

.input-box label {
  position: absolute;
  left: 0;
  top: 12px;
  color: rgba(255, 255, 255, 0.6);
  pointer-events: none;
  transition: 0.3s;
}

/* 聚焦动画：label 上移 + 电流扫边 */
.input-box input:focus ~ label,
.input-box input:valid ~ label {
  top: -16px;
  left: 0;
  color: #00c6ff;
  font-size: 13px;
}

.input-box input:focus {
  border-bottom-color: #00c6ff;
}

/* 电流扫边 */
.input-box::before {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c6ff, #0072ff);
  transition: width 0.4s;
}

.input-box input:focus ~ ::before {
  width: 100%;
}

/* ========= 霓虹按钮 ========= */
.glow-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 50px;
  background: linear-gradient(45deg, #667eea, #764ba2);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.glow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 20px #667eea, 0 0 40px #764ba2;
}

/* 点击粒子爆裂（伪元素快速扩散） */
.glow-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  transform: translate(-50%, -50%);
  transition: width 0.4s, height 0.4s;
}

.glow-btn:active::after {
  width: 300px;
  height: 300px;
  opacity: 0;
}

/* ========= 错误提示 ========= */
.error {
  margin-top: 12px;
  color: #ff6b6b;
  font-size: 13px;
  text-align: center;
}
</style>